本文共 3526 字，大约阅读时间需要 11 分钟。
这篇来利用Ajax做一个给搜索框添加搜索提示的功能，这个我们在百度首页，搜索框随便输入一个字符，就能弹出联想自动，可供用户选择，这篇要做的就是这么一个场景。
1.需求
就是这么一个功能。
2.文件准备
需求中这个index.jsp中的搜索在我们原来项目中没有这个代码，所以这里先把这个素材拷贝进来。（具体素材在我这个项目github上有）
本篇主要是index.jsp和menu_search.jsp这两个文件。在index.jsp中静态包含了menu_search.jsp，代码中，这行代码就是我们前面学习JSP指令学习过的静态包含，是在JSP转换Servlet时引入的文件。
3.给搜索框添加信息提示框
在mene_search.jsp中，给搜索框先整出一个div框来，宽度和搜索框的宽度一样，为了显示明显，先来给边框添加红色。
在menu_serch.jsp文件底部，添加一个div，代码如下。
浏览器刷新，看看效果。
4.创建一个空的servlet文件
先创建一个SearchBookAJAXServlet.java,对应的url映射是/searchBookAJAXServlet
这部分代码后面来写。
5.Dao层代码
在BookDao接口文件中，最底部添加这个代码
public List
在BookDaoImpl.java添加对应的具体方法实现代码。
public List
6. Service层代码
接着写BookService.java中代码，末尾新增以下代码。
public List
然后具体实现代码，在BookServiceImpl.java中末尾添加以下代码。
public List
7.Servlet文件具体代码
下面是SearchBookAJAXServlet.java的完整代码。
package com.anthony.web.servlet;import java.io.IOException;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.anthony.service.BookService;import com.anthony.service.BookServiceImpl;public class SearchBookAJAXServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("UTF-8"); response.setContentType("text/html; charset=UTF-8"); String name = request.getParameter("name"); BookService bs = new BookServiceImpl(); List
8.部署测试
部署到tomcat,重启tomcat服务。浏览器打开servlet地址，看看效果
这里我数据库看看是不是只有一个j开头的，这样我数据库book表再添加一个javascript看看。
这样就是说明代码没有问题了。
9. AJAX查询结果显示在div框中
下面我们来编辑menu_search.jsp文件，这里把文章开头写死div高度给删除，新加了AJAX这一套代码，代码修改如下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
刷新浏览器，看看/index.jsp效果，搜索框输入一个J看看,div框提示的效果。
到这里，还有问题没有解决，那就是点击div中提示，不能点击，我们需要点击之后，自动填充到search框。
10. Div中name鼠标悬停变颜色
就是在div提示的name，鼠标悬停，会自动变颜色，例如变成灰色，离开name区域变成原来的白色，来看看这个怎么实现
上面改动地方在changeBackground_over(div) 和changeBackground_out(div)
刷新浏览器，看看效果。
鼠标悬停变成灰色，鼠标离开变成白色，对比看看上面改动的两个这个动作的function就明白了。
11.解决点击搜索按钮，填充到搜索框
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
关于这个代码最后div中，left和top的位置问题，会随着不同浏览器和不同分辨率，这个红色的div框位置有点偏移，这个问题，就不管了。
项目全部代码请看github:
这篇代码的commit message为 “”
转载地址：http://wnows.baihongyu.com/